<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情</title>
    <link rel="stylesheet" href="./css/common.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo -->
        <img src="./images/logo_003.jpg" alt="">
        <div class="content">
            <span>我的博客系统</span>
            <div class="opts">
                <a href="./blog_list.html">主页</a>
                <a href="./blog_eidt.html">写博客</a>
                <a href="./blog_login.html">注销</a>                
            </div>

        </div>
    </div>
    <!-- 正文部分 -->
    <div class="container">
        <!-- 左边区域 -->
        <div class="container-left">
            <div class="card">
                <img src="./images/nz1.jpeg" alt="">
                <h3 id = "h_details_username"></h3>
                <a href="#">Github</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右边区域 -->
        <div class="container-right">
            <!-- 博客正文 -->
            <div class="blog-content">
                <div class="blog-title" id = "div_datails_title"> 
                    
                </div>
                <div class="blog-datetime" id = "div_datails_datetime">    
                    
                </div>
                <div class="content" id = "div_datails_content">        
                    
                </div>
                
            </div>
            <!-- 以上 博客正文 结束 -->

        </div>
    </div>
</body>

<!--引入Jquery-->
<script src = 'js/jquery-3.6.3.min.js'></script>
<script src = 'js/common.js'></script>
<!-- 再引入编辑器插件 -->
<script src="./editor.md/editormd.min.js"></script>
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.js"></script>

<script>
    $(function(){
        //动态为标签赋值
        //获取当前博客的详细信息
        $.ajax({
            type:'get',
            url:'blog' + location.search,//这里的blog对应servlet中的相对应@WebServlet后的"/blog"
            //回调函数
            success : function(respData){                
                if(respData.code == 0){
                    //成功,为页面中的相应标签赋值
                    //查询
                    let blog = respData.data;
                    //赋值
                    $('#div_datails_title').html(blog.title);
                    $('#div_datails_createTime').html(formatDate(blog.createTime));
                    // $('#div_datails_content').html(blog.content);
                    // 在这里对内容做markdown格式处理
                    editormd.markdownToHTML('div_datails_content',{markdown:blog.content})
                }else{
                    //错误
                    alert(respData.message);
                }
            },
            error : function(){
                //打印日志
                console.log('访问出现错误');
            },
            statusCode : {
                403 : function(){
                    //强制跳转到登录界面
                    location.assign('blog_login.html')
                }
            }
        })

        //获取作者信息
        $.ajax({
            type:'get',
            url:'user'+location.search,
            //回调函数
            success : function(respData){
                //成功
                if(respData.code == 0){
                    let user = respData.data;
                    //为控件赋值
                    $('#h_details_username').html(user.username);
                    //生成删除按钮
                    let htmlStr = '<a href="javascript:void(0);">删除</a>'
                    //javascript:void(0)表示点击按钮什么事情都不干
                    //将html转为jquery对象并追加到页面上
                    let deleteEl = $(htmlStr);
                    //得到这个按钮的父标签
                    $('.opts').append(deleteEl);
                    //绑定事件
                    deleteEl.click(deleteBlog);
                }else{
                    alert(respData.message);
                }
            },
            error: function(){
                //打印日志
                console.log('访问出现问题');
            },
            statusCode :{
                403 : function(){
                    //强制跳转到登录界面
                    location.assign(blog_login.html);
                }
            }
        });

        //删除文章事件
        function deleteBlog(){
            //如果是否定，则直接删除
            if(!confirm("是否删除？")){
                return;
            };
            //否则向后端发送请求，删除文章
            $.ajax({
                type : 'delete',
                url : 'blog' + location.search,
                //回调函数
                success : function(respData){
                //成功
                if(respData.code == 0){
                    //成功，则跳转到详情页
                    location.assign('blog_list.html');
                }else{
                    alert(respData.message);
                }
            },
                error: function(){
                    //打印日志
                    console.log('访问出现问题');
                },
                statusCode :{
                    403 : function(){
                        //强制跳转到登录界面
                        location.assign(blog_login.html);
                    }
                }
            });
        }
    })
</script>

</html>